import React ,{useState} from 'react';
//import myAxios from "../../utils/myAixos"
import {
    Button,
    Table,
    Modal,
    message
} from 'antd';
import {
 
    useNavigate,  
} from "react-router-dom"
import "./qiandao.css"

//以下是表格
const columns = [
    {
      title: '签到时间',
      dataIndex: 'time',
      width:"50%",
    },
    {
      title: '签到状态',
      dataIndex: 'address',
      width:"50%",
    },
  ];
  const data = [
    {
      key: '1',
      time: '2020-01-20 08:30',
      address: '已签到',
    },
    {
      key: '2',
      time: '2020-01-20 08:30',
      address: '已签到',
    },
    {
      key: '3',
      time: '2020-01-20 08:30',
      address: '未签到',
    },
  ];

const Qiandao = () => {
    const [middle, setmiddle] = useState('large'); // default is 'middle'  设置Button的大小
    const [isModalOpen, setIsModalOpen] = useState(false);//签到弹框的状态
    const navigat=useNavigate()
    const goback=()=>{
      navigat(-1)
  }

  //以下3个是签到的模态框
    const qiandao = () => {
       setIsModalOpen(true);
    }
 
    const handleOk = () => {
      setIsModalOpen(false);
      //点击确认，发起请求
      //Success.message('签到成功')
      message.info('签到成功');
    };
    const handleCancel = () => {
      setIsModalOpen(false);
      //点击否
    };
    
    return (
        <div>
           <header className={"qiandaohead"}>
            <div>
            <Button middle={middle} className={"button1"}  onClick={goback}>返回</Button>
            </div>
            <div>
            <Button type="primary" className={"button2"}
                            onClick={qiandao}
                            style={{
                                width: 100,
                                marginRight: 20,

                            }}>教练签到</Button>
            </div>
           </header>
           <section className='qiandaosection'>
           <Table columns={columns} dataSource={data} size="middle" 
         //  rowKey={(record) => record.u_id
            pagination={{
              defaultPageSize: 8,//默认展示
          } }
           />
           </section>

           <Modal title="系统提示"
            open={isModalOpen} 
            onOk={handleOk} 
            onCancel={handleCancel} 
            cancelText='否'
            okText='是'
            centered='true'
            >
                <p style={{textAlign:'center',height:'100px',fontSize:'18px',marginTop:'20px'}}>是否签到</p>
           </Modal>
        </div>

    );
}

export default Qiandao